<template>
    <d2-container>
      <template slot="header">
        <el-row>
          <el-col :span="12" style="text-align:center">
            <span style="font-weight:bolder">待发货</span>
          </el-col>
          <el-col :span="1">
            <el-divider direction="vertical"></el-divider>
          </el-col>
          <el-col :span="9" style="text-align:center">
            <span style="font-weight:bolder">退单申请</span>
          </el-col>
          <el-col :span="2">
            <el-button round icon="el-icon-refresh" type="primary" @click="getList1();getList2();">刷新</el-button>
          </el-col>
      </el-row>
      </template>
      <el-row style="height: 100%;">
        <el-col :span="12" style="height: 100%;">
          <el-table
          :data="tableData"
          stripe
          border
          height="100%">
          <el-table-column prop="id" label="订单编码" width="80" header-align="center"></el-table-column>
          <el-table-column prop="user_id" label="用户编码" width="80" header-align="center"></el-table-column>
          <el-table-column prop="receive_address" label="收货地址" width="320" header-align="center"></el-table-column>
          <el-table-column fixed="right" label="操作" width="150" header-align="center">
              <template slot-scope="scope">
                  <el-popconfirm
                      title="确定发货吗？"
                      @confirm="deliver(scope.row)"
                      @cancel="cancelPop"
                  >
                      <el-button slot="reference" type="success" size="small" style="margin-right:10px;">发货</el-button>
                  </el-popconfirm>
                  <el-popconfirm
                      title="确定退单吗？"
                      @confirm="chargeback(scope.row)"
                      @cancel="cancelPop"
                  >
                      <el-button slot="reference" type="danger" size="small">退单</el-button>
                  </el-popconfirm>
              </template>
          </el-table-column>
          </el-table>
        </el-col>
        <el-col :span="1" style="height: 100%;">
          <el-divider direction="vertical" style="height: 100%;"></el-divider>
        </el-col>
        <el-col :span="11" style="height: 100%;">
          <el-table
          :data="tableData2"
          stripe
          border
          height="100%">
          <el-table-column prop="id" label="订单编码" width="80" header-align="center"></el-table-column>
          <el-table-column prop="user_id" label="用户编码" width="80" header-align="center"></el-table-column>
          <el-table-column prop="remarks" label="备注" width="300" header-align="center" :formatter="remarksFormatter"></el-table-column>
          <el-table-column fixed="right" label="操作" width="100" header-align="center">
              <template slot-scope="scope">
                <el-popconfirm
                      title="确定退单吗？"
                      @confirm="chargeback(scope.row)"
                      @cancel="cancelPop"
                  >
                      <el-button slot="reference" type="danger" size="small">退单</el-button>
                  </el-popconfirm>
              </template>
          </el-table-column>
          </el-table>
        </el-col>
      </el-row>
    </d2-container>
</template>
  <script>
  import {request} from '@/api/service'
  export default {
    name: 'page1',
    data(){
      return {
        tableData:[],
        tableData2:[],
        orderForm:{
          id:undefined,
          state:undefined,
          receive_address:undefined,
          remarks:undefined
        },
      }
    },
    methods: {
      remarksFormatter(row){
        if(row.remarks == undefined || row.remarks == ""){
          return "无"
        } 
        else return row.remarks;
      },
      cancelPop(){

      },
      getList1(){
        request({
          url: 'order/stateOrder/1',
          method: 'get'
        }).then(res=>{
          this.tableData = res;

        })
      },
      getList2(){
        request({
          url: 'order/stateOrder/-2',
          method: 'get'
        }).then(res=>{
          this.tableData2 = res;

        })
      },
      deliver(row){
        this.orderForm.id = row.id;
        this.orderForm.state = 2;//设为已发货
        this.orderForm.receive_address = row.receive_address;
        this.orderForm.remarks = row.remarks;
        let order = JSON.parse(JSON.stringify(this.orderForm));

        request({
          url: 'order',
          method: 'put',
          data:order
        }).then(res=>{
          this.$notify({
              title: '成功',
              message: '发货成功',
              type: 'success'
          });
          this.getList1();
        })
      },
      chargeback(row) {
        this.orderForm.id = row.id;
        this.orderForm.state = -3;//设为已退单
        this.orderForm.receive_address = row.receive_address;
        this.orderForm.remarks = row.remarks;
        let order = JSON.parse(JSON.stringify(this.orderForm));

        request({
          url: 'order',
          method: 'put',
          data:order
        }).then(res=>{
          this.$notify({
              title: '成功',
              message: '退单成功',
              type: 'success'
          });
          this.getList2();
        })
      }
    },
    created(){
      this.getList1();
      this.getList2();
    }
  }
  </script>
